<template>
    <!-- 富文本编辑器 -->
    <div class="class-quillEditor">
        <quill-editor ref="myQuillEditor"
            v-model="content"
            :config="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
            @change="onEditorChange($event)">
        </quill-editor>
    </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' //调用编辑器
    export default {
        data () {
            return {
                //编辑器配置
                editorOption: {
                    
                    modules:{
                        toolbar:[
                            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                            ['blockquote', 'code-block']
                        ]
                    }
                },  
                //初始化内容
                content: '<h2>Hello</h2>',
            }
        },
        methods : {
            handlerSubmit() {
                // 获取富文本的信息
                console.log(this.content);
            },
            onEditorBlur(editor) {
                console.log('editor blur!', editor)
            },
            onEditorFocus(editor) {
            },
            onEditorReady(editor) {
            },
            onEditorChange({ editor, html, text }) {
                this.content = html
            },
        }
    }
</script>

<style scoped>

</style>